<template>
  <div class="code-drawer">
    <div class="code-but-operation">
      <span class="s">title标题设置</span>
      <el-input v-model="propsData.titleProp.name" placeholder="title标题设置" class="mr-12 wd180"></el-input>
      <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addBut">添加按钮</el-button>
    </div>
    <!--配置按钮-->
    <draggable v-model=" propsData.titleProp.butArray">
      <ul class="code-but-array" v-for="(item,key) in propsData.titleProp.butArray" :key="key">
        <li>
          <span>按钮名称</span>
          <el-input v-model="item.name" placeholder="按钮名称" clearable></el-input>
        </li>
        <li>
          <span>按钮方法名称</span>
          <el-input v-model="item.methodName" placeholder="按钮方法名称" clearable></el-input>
        </li>
        <li class="but-color">
          <span style="width: 80px">按钮颜色</span>
          <el-select v-model="item.color" placeholder="按钮颜色">
            <el-option
                v-for="item in $store.state.butColorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li class="but-icon">
          <span style="width: 80px">按钮图标</span>
          <e-icon-picker v-model="item.icon">
            <template #prepend="{icon}">
              <e-icon :icon-name="icon" class="e-icon"/>
            </template>
            <template #icon="{icon}">
              <e-icon :icon-name="icon" class="e-icon"/>
            </template>
          </e-icon-picker>
        </li>
        <li>
          <span>选择操作表单</span>
          <el-select v-model="item.choiceFrom" placeholder="选择操作表单">
            <el-option
                v-for="item in propsData.formProp.formData"
                :key="item.name"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </li>
        <li class="but-color2">
          <span style="width: 80px">表单属性</span>
          <el-select v-model="item.formType" placeholder="表单属性">
            <el-option
                v-for="item in $store.state.formTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li class="del">
          <el-button type="danger" @click="delBut(key)">删除按钮</el-button>
        </li>
      </ul>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {draggable},
  props: ['propsData'],
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    //添加按钮
    addBut() {
      let jsonData = {
        name: '',//按钮名称
        methodName: '',//按钮方法名称
        icon: 'el-icon-check',//按钮图标
        color: 'primary',//按钮颜色
        choiceFrom:'',//选择操作表单
        formType:'提交',//表单属性
      }
      this.propsData.titleProp.butArray.push(jsonData)
    },
    //删除按钮
    delBut(key) {
      this.propsData.titleProp.butArray.splice(key, 1)
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
